<template>
  <el-date-picker
      :size="size"
      :style="{width: width ? (width+'px') : '155px', height: height+'px'}"
      v-model="val"
      :shortcuts="shortcuts"
      :readonly="readonly"
      :disabled="disabled"
      :clearable="clearable"
      :placeholder="placeholder"
      :type="type"
      @change="change"
  />
</template>

<script  >
import tool from "@/utils/tool";
export default {
  props: {
    modelValue: {  type: [Date, String, Array], default: '' },
    placeholder: {  type: String, default: ' ' },
    width: {  type: Number, default: 0 },
    height: {  type: [Number, String], default: '' },
    size: {  type: String, default: 'small' },
    type: {  type: String, default: 'date' },
    readonly: {type: Boolean, default: false},
    disabled: {type: Boolean, default: false},
    clearable: {type: Boolean, default: false},
  },
  data () {
    return {
      val: this.modelValue,
      shortcuts: [
        {
          text: '今天',
          value: () => {
            return new Date()
          }
        },
        {
          text: '昨天',
          value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date
          }
        },
        {
          text: '前天',
          value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
            return date
          }
        },
        {
          text: '一周前',
          value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date
          }
        },
        {
          text: '一月前',
          value: () => {
            let str = tool.getDay('', -1, 'MONTH')
            const date = new Date(str);
            return date
          }
        },
        {
          text: '三月前',
          value: () => {
            let str = tool.getDay('', -3, 'MONTH')
            const date = new Date(str);
            return date
          }
        },
        {
          text: '半年前',
          value: () => {
            let str = tool.getDay('', -6, 'MONTH')
            const date = new Date(str);
            return date
          }
        },
        {
          text: '一年前',
          value: () => {
            let str = tool.getDay('', -1, 'YEAR')
            const date = new Date(str);
            return date
          }
        },
      ]
    }
  },
  emits: ['update:modelValue'],
  methods: {
    change (val) {
      if(this.type === 'daterange') {
        if(val) {
          let b = tool.getDay(val[0])
          let e = tool.getDay(val[1])
          this.$emit('update:modelValue', [b, e])
        }
        else {
          this.$emit('update:modelValue', [])
        }
      }
      else {
        if(val) {
          this.$emit('update:modelValue', tool.dateFormat(val))
        }
        else {
          this.$emit('update:modelValue', null)
        }
      }
    }
  },
  watch: {
    modelValue (val) {
      this.val = val
    }
  }
}
</script>

<style scoped>

</style>
